<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0" />
<link href="/tmx/JSP/css/bootstrap.min.css" rel="stylesheet" />
<link href="/tmx/JSP/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/tmx/JSP/css/templatemo_misc.css" />
<link type="text/css" rel="stylesheet" href="/tmx/JSP/css/easy-responsive-tabs.css" />
<link href="/tmx/JSP/css/templatemo_style.css" rel="stylesheet" /> 
        
<script src="/tmx/JSP/js/jquery-1.10.2.min.js"></script> 
<script src="/tmx/JSP/js/jquery.lightbox.js"></script>
<script src="/tmx/JSP/js/easyResponsiveTabs.js" type="text/javascript"></script>  
<script type="text/javascript" src="/tmx/JSP/js/layer/layer.js" ></script>

<script>
    function showhide()
    {
        var div = document.getElementById("newpost");
		if (div.style.display !== "none") 
		{
			div.style.display = "none";
		}
		else 
		{
			div.style.display = "block";
		}
    }
  </script>
  
  <style>
  body{
	font-family:Microsoft YaHei;
  }
  
  h1{
	font-family:Microsoft YaHei;
  }
  
  .span0{
	color: #FF7F00;
	font-size: 12pt;
  }
  
  .span1{
	color: #FF0000;
	font-size: 12pt;
  }
  
  .span2{
	color: #6495ED;
	font-size: 12pt;
  }
  
  .block_position_left{
	float: left; 
  }
  
  .block_position_right{
	float: right; 
  }
  
  .table {
	width: 96%;
	margin-left: 2%;
	margin-top: 40px;
}

.list {
	width: 100%;
	height: 30px;
	margin-top: 10px;
}

.list2{
	width: 100%;
	height: 200px;
	margin-top: 10px;
}

.a {
	float: left;
	width: 30%;
	text-align: right;
}

.b {
	float: left;
	widht: 60%;
	margin-left: 5%
}

.c {
	float: left;
	width: 1%;
	color: #F00
}

.d {
	margin-left: 40%
}
  
  </style>
  
  </head>
  <body>
    <!-- logo start -->
    <div class="logocontainer">
    	<div class="row">
        	<h1><a href="#">社区志愿者服务中心信息化平台软件</a></h1>
            <div class="clear"></div>
            <div class="templatemo_smalltitle"></div>
       </div>
    </div>
    <!-- logo end -->    
   <div id="menu-container" class="main_menu">
	
    <!-- start -->
   <div class="testimonial" id="menu-4">
    	<div class="container">
        	<div class="row templatemo_bordergapborder">
				<!--vertical Tabs-->
				<div id="cmt">
					<div class="col-md-3 col-sm-12 templatemo_leftgap_about">
					<ul class="resp-tabs-list templatemo_testitab">
						<s:iterator value="prjList" var="p" status="statu">
							<li>${p.title }
								<%-- <s:if test="#p.status==0">
								<span class="span0">(即将招募)</span>
								</s:if> --%>
								<s:if test="#p.status==1">
								<span class="span1">(正在招募)</span>
								</s:if>
								<s:else>
								<span class="span2">(暂停招募)</span>
								</s:else>
								<%-- <s:if test="#p.status==2">
								<span class="span2">(暂停招募)</span>
								</s:if> --%>
							</li>
						</s:iterator>
					</ul>
					<!-- <div class="templatemo_aboutlinkwrapper">
					<div class="templatemo_link"><a class="show-1 templatemo_hometestimonial" href="/tmx/JSP/index.jsp">返回</a></div>
				</div> -->
				</div>
					<div class="resp-tabs-container templatemo_testicontainer">
						<s:iterator value="prjList" var="p" status="statu">
						<div>
		                	<div class="templatemo_col70 templatemo_rightgap_about" style="height: 100%;">
		                    	<div class="templatemo_graybg templatemo_botgap" style="height: 849px;width: 100%;">
		                         <div class="templatemo_frame" style="height: 789px;">
									<div class="content_top">
										<%-- <s:if test="#p.status==0">
										<div class="grey_block_middle" data-project="${p.timeKey }">申请加入</div>
										</s:if> --%>
										<s:if test="#p.status==1">
										<div class="red_block_middle" data-project="${p.timeKey }">申请加入</div>
										</s:if>
										<s:else>
										<div class="grey_block_middle" data-project="${p.timeKey }">申请加入</div>
										</s:else>
										<%-- <s:if test="#p.status==2">
										<div class="grey_block_middle" data-project="${p.timeKey }">申请加入</div>
										</s:if> --%>
									</div>
									<div class="block_position_left">
										${p.content }
									</div>	
		                         </div>
		                        </div>
								<!-- <div>
									<div style="height: 141px; width: 100%;">
										<div class="yellow_block_large block_position_left">
											我要留言
										</div>
										<div class="red_block_large block_position_right">
											加入我们
										</div>
									</div>
								</div> -->
		                    </div>
		                    <div class="templatemo_col30 templatemo_leftgap templatemo_botgap">
								<div class="yellow_block_large ">
									我要留言
								</div>
								<div class=" " style="height: 20px;">
								</div>
								<div class="red_block_large ">
									加入我们
								</div>
								<!-- <div class="templatemo_aboutlinkwrapper" style="margin-top:337px;">
									<div class="templatemo_link"><a class="show-1 templatemo_hometestimonial" href="/tmx/JSP/index.jsp">返回</a></div>
								</div> -->
								<div class="grey_block_large" style="margin-top:406px;" onclick="goBack()">
									返回
								</div>
							</div>
		                </div>
						</s:iterator>
		            </div>
				</div>
				<div class="col-sm-12 templatemo_leftgap templatemo_aboutlinkwrapper1">
				<div class="templatemo_aboutback templatemo_botgap">
					<div class="templatemo_link"><a class="show-1 templatemo_hometestimonial" href="#">返回</a></div>
				</div>
			</div>
			</div>
		</div>
	</div>
    <!-- end -->	
    
    </div>
    
    <!-- logo start -->
    <!-- <div class="logocontainer">
    	<div class="row">
            <div class="templatemo_footer"></div>
       </div>
    </div> -->
    <!-- logo end -->  
   <script type="text/javascript">
   
   var layerW = '480px';
   var layerH = '270px';
   
	// 添加申请
   function addApply(projectKey) {
		var name = $('#name').val();
		var phone = $('#phone').val();
		
		if (null == name || name == "") {
			alert("姓名为必填项！");
			return;
		}

		if (null == phone || phone == "") {
			alert("手机号为必填项！");
			return;
		}

		var check = /^[\d]{11}$/;
		if (!check.test(phone)) {
			alert("请输入11位的手机号");
			return;
		}
		
		$.post('/tmx/ProjectReleaseAction!saveApply.action', {
			"apply.name" : name,
			"apply.phone" : phone,
			"projectKey" : projectKey,
		}, function(result) {
			if(result){
				alert('提交成功');
			}else{
				alert('提交失败');
			}
		});
   }
	
	// 加入我们
   function joinUs() {
		var name = $('#name').val();
		var phone = $('#phone').val();
		var projectKey = $('#joinPrjs').val();
		
		if (null == name || name == "") {
			alert("姓名为必填项！");
			return;
		}

		if (null == phone || phone == "") {
			alert("手机号为必填项！");
			return;
		}

		var check = /^[\d]{11}$/;
		if (!check.test(phone)) {
			alert("请输入11位的手机号");
			return;
		}
		
		$.post('/tmx/ProjectReleaseAction!saveApply.action', {
			"apply.name" : name,
			"apply.phone" : phone,
			"projectKey" : projectKey,
		}, function(result) {
			if(result){
				alert('提交成功');
			}else{
				alert('提交失败');
			}
		});
   }
	
	// 添加留言
   function addMessage() {
		var name = $('#msgName').val();
		var phone = $('#msgPhone').val();
		var content = $('#message').val();

		if (null == content || content == "") {
			alert("留言为必填项！");
			return;
		}
		
		if(phone != null && phone != ""){
			var check = /^[\d]{11}$/;
			if (!check.test(phone)) {
				alert("请输入11位的手机号");
				return;
			}	
		}
		
		$.post('/tmx/ProjectReleaseAction!saveMessage.action', {
			"message.name" : name,
			"message.phone" : phone,
			"message.content" : content,
		}, function(result) {
			if(result){
				alert('提交成功');
			}else{
				alert('提交失败');
			}
		});
   }
   
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true, // 100% fit in a container
            closed: 'accordion', // Start closed if in accordion view
            activate: function(event) { // Callback function if tab is switched
                var $tab = $(this);
                var $info = $('#tabInfo');
                var $name = $('span', $info);

                $name.text($tab.text());

                $info.show();
				
            }
        });

        $('#ab').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
        });
		

		$('#cmt').easyResponsiveTabs({
            type: 'vertical',
            width: 'auto',
            fit: true,
        });
		
		// 1000毫秒内回到距离顶部120px处
		$('ul').click(function() {
			$('html, body').stop().animate({
				scrollTop : 120
			}, 1000);
		});
		
		// 申请加入
		$('.red_block_middle').on('click', function(){ 
			var projectKey = $(this).data('project');
			var content = '<div class="table">';
			content += '<div class="list"><div class="a">姓名</div><div class="c">*</div><div class="b"><input id="name" value=""></input></div></div>';
			content += '<div class="list"><div class="a">手机号</div><div class="c">*</div><div class="b"><input id="phone" value="" maxlength="11"></input></div></div>';
			content += '<div class="list"><div class="red_block_small d" onclick="addApply('+projectKey+')">提交</div></div>';
			content += '</div>';
			// 页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
			layer.ready(function(){ 
				//官网欢迎页
				layer.open({
					type: 1,
					//skin: 'layui-layer-lan',
					title: '申请加入',
					fix: false,
					shadeClose: true,
					maxmin: true,
					area: [layerW, layerH],
					content: content,
					end: function(){
						//layer.tips('试试相册模块？', '#photosDemo', {tips: 1})
					}
				});
			});
		});
		
		// 加入我们
		$('.red_block_large').on('click', function(){
			var content = '<div class="table">';
			content += '<div class="list"><div class="a">姓名</div><div class="c">*</div><div class="b"><input id="name" value=""></input></div></div>';
			content += '<div class="list"><div class="a">手机号</div><div class="c">*</div><div class="b"><input id="phone" value="" maxlength="11"></input></div></div>';
			content += '<div class="list"><div class="a">要加入的项目</div><div class="c">*</div><div class="b">';
			content += '<select id="joinPrjs"><s:iterator value="prjList" var="p" status="statu"><option value="${p.timeKey}">${p.title}</option></s:iterator></select></div></div>';
			content += '<div class="list"><div class="red_block_small d" onclick="joinUs()">提交</div></div>';
			content += '</div>';
			// 页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
			layer.ready(function(){ 
				//官网欢迎页
				layer.open({
					type: 1,
					//skin: 'layui-layer-lan',
					title: '加入我们',
					fix: false,
					shadeClose: true,
					maxmin: true,
					area: [layerW, layerH],
					content: content,
					end: function(){
						//layer.tips('试试相册模块？', '#photosDemo', {tips: 1})
					}
				});
			});
		});
		
		// 我要留言
		$('.yellow_block_large').on('click', function(){
			var content = '<div class="table">';
			content += '<div class="list"><div class="a">姓名</div><div class="c" style="visibility:hidden;">*</div><div class="b"><input id="msgName" value=""></input></div></div>';
			content += '<div class="list"><div class="a">手机号</div><div class="c" style="visibility:hidden;">*</div><div class="b"><input id="msgPhone" value="" maxlength="11"></input></div></div>';
			content += '<div class="list2"><div class="a">留言</div><div class="c">*</div><div class="b"><textarea id="message" rows="8" cols="40"></textarea></div></div>';
			content += '<div class="list"><div class="red_block_small d" onclick="addMessage()">提交</div></div>';
			content += '</div>';
			// 页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
			layer.ready(function(){ 
				//官网欢迎页
				layer.open({
					type: 1,
					//skin: 'layui-layer-lan',
					title: '我要留言',
					fix: false,
					shadeClose: true,
					maxmin: true,
					area: ['960px', '540px'],
					content: content,
					end: function(){
						//layer.tips('试试相册模块？', '#photosDemo', {tips: 1})
					}
				});
			});
		});
    });
    
    function goBack(){
    	location.href = "/tmx/JSP/index.jsp";
    }
</script>

  </body>
</html>